<template>
    <div class="coms">
         <Swipers></Swipers>
         <ListIcons></ListIcons>
         <div class="tits">
              <li>
                  <div>
                      <h3>品牌特卖</h3>
                      <p class="p1">今日上新70+</p>
                  </div>
                  <div>
                      <img src="http://t00img.yangkeduo.com/goods/images/2018-11-27/d087b29f646ce7fa78326709e17f911a.jpeg" alt="">
                      <p>0.7折</p>
                  </div>
                  <div>
                      <img src="http://t00img.yangkeduo.com/goods/images/2019-01-22/9b0badfae9c35e29a6452d2c2d0d1f02.jpeg" alt="">
                       <p>7.4折</p>
                  </div>
                  <div>
                      <img src="http://t00img.yangkeduo.com/goods/images/2019-01-20/7bad0150f5722ceff156e09f8e16ff1f.jpeg" alt="">
                      <p>1.3折</p>
                  </div>
                  <div>
                      <img src="http://t16img.yangkeduo.com/img_check/2019-07-23/68ed93e66d68311be24b9c0312f83226.jpg" alt="">
                      <p>9.3折</p>
                  </div>
              </li>
         </div>
         <ListItems v-for="(item,index) in mainImgs.results" :key="index" :item="item"></ListItems>
    </div>
</template>

<script>
import Swipers from "@/components/swipers"
import ListIcons from "@/components/ListIcons"
import ListItems from "@/components/ListItems"
import {mapState,mapActions} from "vuex";
export default {
    data(){
        return {

        }
    },
     computed:{
        ...mapState(['mainImgs'])
    },
    methods:{
       ...mapActions(['getImgsFn'])
    },
    created(){
        this.getImgsFn()
    },
    components:{
         Swipers,
         ListIcons,
         ListItems
    }
}
</script>
<style scoped  lang="scss">
@import "~@/scss/common.scss";
.coms{
    width:100%;
    .tits{
        width:100%;
        height:pxTorem(75px);
        margin-top:2px;
        li{
            width:100%;
            height:100%;
            display:flex;
            justify-content:space-around;
            align-items:center;
            div{
                text-align: center;
                h3{
                    font-size:pxTorem(16px);
                    font-weight:bold;
                }
                .p1{
                    margin-top:2px;
                    padding:4px;
                    background:red;
                    color:white;
                }
                img{
                    width:pxTorem(54px);
                    height:pxTorem(54px);
                }
            }
        }
    }
}
</style>